<template>
	<view class="x-wrapper">
		<img src="@/static/icon/main.jpg" alt="" class="img">
		<!-- #ifdef MP-WEIXIN -->
		<u-button v-if="authArray.length" style="color:#ffffff;backgroundColor:#3570F9;"  :customStyle="btnGetCode" open-type='getPhoneNumber' @getphonenumber="getphone" >手机号授权登录</u-button>
		<u-button v-else style="color:#ffffff;backgroundColor:#3570F9;"  :customStyle="btnGetCode" @click="dialogPhoto">授权登录</u-button>
		<view class="protocol-box2">
					<u-checkbox-group v-model="authArray" size="24rpx" inactiveColor="#999999" activeColor="#386FFF"
						shape="circle" placement="row">
						<u-checkbox name="isAuth"></u-checkbox>
						<text class="p-txt" @click="selectProtocol">已仔细阅读并同意<text class="i-txt"
								@click.stop="goUrl('policy')">《隐私政策》</text>和<text class="i-txt"
								@click.stop="goUrl('service')">《服务协议》</text></text>
					</u-checkbox-group>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="cont">
			<view class="form">
				<view class="form-list">
					<view class="label">手机号</view>
					<input v-model="loginForm.mobile" type="number" placeholder="请输入手机号"/>
				</view>
				<view class="form-list">
					<view class="label">验证码</view>
					<input v-model="loginForm.verifyCode" type="number" placeholder="请输入验证码" maxlength="6"/>
					<view class="line-gap"></view>
					<button :disabled="verifyText != '获取验证码'" @click="getCode()">{{verifyText}}</button>
				</view>
			</view>
			<button class="subLogin" @click="submitLogin()">登录</button>
		</view>
		<!-- #endif -->
		<u-popup :show="show" @close="close" @open="open" :round="10" :closeOnClickOverlay="false">
			<view class="contTask">
				<view class="title">用户隐私保护提示</view>
				<view class="cont">
					在你使用 依陪+服务之前，请仔细阅读<text @click.stop="goUrl('policy')">《依陪+小程序隐私保护指引》</text>
					如你同意该指引，请点击“同意”开始使用本小程序。
				</view>
				<view class="btnBox">
					<button class="reject" @click="close">拒绝</button>
					<button class="agree" @click="agreeFn">同意</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import {
		login,
		sendCode
	} from '@/common/api.js'
	import md5 from '@/common/md5.js'
	export default {
		data() {
			return {
				loginForm:{
					mobile:'',
					verifyCode:'',
				},
				verifyTime: 60,
				verifyText: '获取验证码',
				show: false,
				isLogin: false,
				isLoad: false,
				wechatInfo: {},
				 btnGetCode: {
				          backgroundColor: '#3570F9',//驼峰命名注意
						  width: '80vw',
						  height: '100rpx',
						  lineHeight: '100rpx',
	                      color:'#fff'
						  },

				localtoken: '',
				navIndex: 0,
				list: [{
						id: 0,
						name: '密码登录'
					},
					{
						id: 1,
						name: '验证码登录'
					}
				],
				isShowPassword: true,
				phoneNumber: '',
				code: '',
				userName: '',
				userPwd: '',
				clientType: 1,
				authArray: [],
				tips: '',
				seconds: 60,
				//验证规则
				rules: {
					userName: {
						rule: /\S/,
						// msg("手机号码不能为空")
					},
					userPwd: {
						rule: /^[0-9a-zA-Z]{6,16}$/,
						// msg: "密码应该为6-16位"
					},
					phoneNumber: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					code: {
						rule: /^[0-9]{6}$/,
						msg: "请输入6位数字验证码"
					}
				},
			}
		},
		onShow() {
			setTimeout(()=>{
				this.show = true
			},1000)
			this.navIndex == 0;
			this.localtoken = uni.getStorageSync('token');

		},
		onLoad(){
		},
		methods: {
			async submitLogin() {
				if(!this.$u.trim(this.loginForm.mobile)){
					this.$u.toast('请输入手机号')
					return;
				}
				if(!uni.$u.test.mobile(this.loginForm.mobile)){
					this.$u.toast('请输入正确的手机号')
					return
				}
				if(!this.$u.trim(this.loginForm.verifyCode)){
					this.$u.toast('请输入验证码')
					return;
				}
				if(this.loginForm.verifyCode.length!=6){
					this.$u.toast("请输入正确的验证码");
					return;
				}
				let params = {
					code: this.loginForm.verifyCode,
					phone: this.loginForm.mobile,
					userId: ''
				}
				const res = await this.$request('/api/applet/loginAndRegister', params, 'POST','type')
				if (res.data.code == 200) {
					this.$store.commit('SET_USERINFO', res.data.data)
					// let userInfo = this.$store.getters.userInfo;
					uni.setStorageSync('token', res.data.data.token)
					uni.setStorageSync('userId', res.data.data.userId)
					uni.setStorageSync('userType', res.data.data.userType)
					uni.setStorageSync('isVerified', res.data.data.isVerified)
					uni.setStorageSync('nickName', res.data.data.nickName)
					// uni.setStorageSync('userType', '20')
					uni.setStorageSync('userWindow', '001')
					this.$u.toast('登录成功')
					this.$u.route({
						url: `pages/business/home`,
						type: 'tab'
					})
				}
			},
			agreeFn(){
				this.show = false
				this.authArray.push('isAuth')
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.authArray = []
				// console.log('close');
			},
			dialogPhoto(){
				if (this.authArray.length == 0) {
					this.$u.toast('请勾选服务协议和隐私政策');
				}
			},
			getSetting(obj) {
				if (this.$store.getters.wechatInfo) {
					this.isLogin = true;
				} else {
					this.isLogin = false;
				}
			},
			getLogin() {

				let _this = this;
				uni.login({
					provider: 'weixin',
					success: res => {
						_this.isLoad = true
						_this.isLogin = true
						_this.code = res.code;
						console.log('_this.code',res.code)
					}
				}); //先登录在获取手机号
			},
			getuserinfo() {
				if(!uni.getUserProfile){
					uni.showToast({
						title: '登录环境异常',
						icon: 'none'
					});
					return;
				}
				let _this = this;
				uni.getUserProfile({
					lang:"zh_CN",
					desc: '用于登录获取会员资料',
					success: function(res) {
						if ((res.errMsg = 'getUserInfo:ok')) {
							// _this.wechatInfo = res.userInfo;
							console.log('res.userInfo',res)
							// _this.isLogin = true;
							_this.getLogin()
							_this.$store.commit('setWechat', res.userInfo);
						} else {
							uni.showToast({
								title: '已取消授权',
								icon: 'none'
							});
						}
					}
				});
			},
			checkIndex(index) {
				this.navIndex = index;
			},
			selectProtocol() {
				if (this.authArray.length) {
					this.authArray = []
				} else {
					this.authArray.push('isAuth')
				}
			},
			goUrl(path) {
				this.$u.route({
					url: `pages/login/${path}`
				})
			},
			//密码是否显示
			toggleShowPassword() {
				var isShowPassword = !this.isShowPassword;
				this.isShowPassword = isShowPassword
			},
			//判断验证是否符合要求，合法性校验
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			//账号密码登录
			goLoginPassword() {
				if (!this.validate('userName')) {
					this.$u.toast("账号不能为空")
					return
				}
				if (!this.validate("userPwd")) {
					this.$u.toast("密码应该为6-16位")
					return
				}
				if (this.authArray.length == 0) {
					this.$u.toast('请勾选服务协议和隐私政策');
					return
				}
				this.$u.route({
					url: `pages/business/home`,
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			countDown() {
				if (this.verifyTime > 0) {
					this.verifyText = this.verifyTime + 's'
					this.verifyTime--
					setTimeout(()=> {
						this.countDown()
					}, 1000)
				} else {
					this.verifyText = '获取验证码'
					this.verifyTime = 60
				}
			},
			async getCode() {
				if (!this.loginForm.mobile) {
					this.$u.toast('手机号码不能为空');
					return
				} else {
					if (this.$u.test.mobile(this.loginForm.mobile)) {
						let data = {
							phone: this.loginForm.mobile,
							type: 'applet'
						}
						const res = await this.$request("/api/applet/sendCode", data, 'GET')
						console.log('res', res)
						if (res.data.code == 200) {
							this.countDown()
							this.$u.toast('发送成功');
						}
						if (res.data.code == 500) {
							this.$u.toast(res.data.msg)
						}
					} else {
						this.$u.toast('手机号码格式有误');
					}
				}

			},
			end() {

				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			// 验证码登录
			async getphone(a) {
						if (this.authArray.length == 0) {
							this.$u.toast('请勾选服务协议和隐私政策');
							return

						}else{
						//登录
						let loginCode = this.code
						let params = {
							code:a.detail.code,
							loginCode
						}
						const res = await this.$request('/api/applet/AuthorizedLogin', params, 'POST')

						if (res.data.code == 200) {
							this.$store.commit('SET_USERINFO', res.data.data)
							// let userInfo = this.$store.getters.userInfo;
							uni.setStorageSync('token', res.data.data.token)
							uni.setStorageSync('userId', res.data.data.userId)
							uni.setStorageSync('userType', res.data.data.userType)
							uni.setStorageSync('isVerified', res.data.data.isVerified)
							uni.setStorageSync('nickName', res.data.data.nickName)
							// uni.setStorageSync('userType', '20')
							uni.setStorageSync('userWindow', '001')
							this.$u.toast('登录成功')
							this.$u.route({
								url: `pages/business/home`,
								type: 'tab'
							})
						}
                }
			},
			goRegister() {
				this.$u.route({
					url: `pages/login/register`,
				})
			},
			goForgetWord() {
				this.$u.route({
					url: `pages/login/forgetPassword`,
				})
			},
			clearInput(str) {
				str == 'code' ? this.code = '' : this.phoneNumber = ''
			}

		}
	}
</script>

<style lang="scss" scoped>



	.x-wrapper{
		width: 100%;
		position: absolute;
		height: 100%;
		padding-top: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

		.img{
			width: 100%;
			height:500rpx;
			margin-top: 40rpx;
			margin-bottom: 35rpx;
		}


		.protocol-box2 {
			margin-top: 12rpx;
			display: flex;
			justify-content: center;

			.p-txt {
				font-size: 24rpx;
				color: $uni-color-777;
				font-family: PingFangSC-Light, PingFang SC;

				.i-txt {
					color: $uni-color-777;
					font-family: PingFangSC-Light, PingFang SC;

				}
			}
		}

	}



	/deep/ .u-text__value {
		// margin-left: 12px !important;
		justify-content: center !important;
	}

	/deep/.u-button__text {
		font-size: 18px !important;
	}

	/deep/.u-text {
		justify-content: center !important;
	}
	.contTask{
		padding: 60rpx 40rpx 110rpx 40rpx;
		.title{
			font-weight: bold;
			padding-bottom: 30rpx;
		}
		.cont{
			color: #9a9b9c;
			line-height: 52rpx;
			font-size: 27rpx;
			text{
				color: #84a1d8;
			}
		}
		.btnBox{
			margin-top: 60px;
			display: flex;
			.reject{
				width: 220rpx;
				color: #000;
				background: #f2f2f2;
				margin-right: 20rpx;
				font-size: 30rpx;
			}
			.agree{
				width: 220rpx;
				color: #fff;
				background: #05c160;
				font-size: 30rpx;
			}
		}
	}

	.cont{
		position: relative;
		margin-top: 60rpx;
		padding: 0 30rpx;
		z-index: 99;
		.form{
			background-color: #fff;
			box-shadow: 0px 0px 5px #dbe4de;
			border-radius: 4rpx;
		}
		.form-list{
			height: 94rpx;
			position: relative;
			display: flex;
			align-items: center;
			padding:0 20rpx;
			border-bottom: #eee 1rpx solid;
			.label{
				width: 150rpx;
			}
			input{
				flex:1;
				height: 100%;
				font-size: 32rpx;
				color: #000;
			}
			.line-gap{
				width: 2rpx;
				height: 46rpx;
				margin: 0 20rpx;
				background-color: #eee;
			}
			button{
				margin: 0;
				padding: 0;
				color: #F5A623;
				background: none;
				font-size: 32rpx;
				border:0;
				z-index: 9;
				&:after{
					border:0;
				}
			}
			.codetext{
				image{
					width: 154rpx;
					height: 60rpx;
				}
			}
		}
		.subLogin{
			height: 90rpx;
			margin-top: 60rpx;
			background: #3c9cff;
			color: #fff;
			line-height: 90rpx;
			border-radius: 8rpx;
			font-size: 30rpx;
			border: 0;
			&.green{
				background: #4cd964;
				margin-top: 22rpx;
			}
			&:after{
				border:0;
			}
		}
	}
</style>